<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

interface PostDetail {
  id: number
  summary: string
  writer: {
    id: number
    name: string
  }
  updateTime: string
  content: string
  likeNum: number
  saveNum: number
  commentNum: number
  isLiked: boolean
  isSaved: boolean
}

const post = ref<PostDetail | null>(null)
const loading = ref(true)

// 模拟数据
const mockPost: PostDetail = {
  id: 1,
  summary: "Vue 3 新特性详解：Composition API 的使用指南",
  writer: {
    id: 100,
    name: "技术达人"
  },
  updateTime: "2024-01-15",
  content: `
    <h2>Vue 3 Composition API 简介</h2>
    <p>Vue 3 的 Composition API 是一个全新的逻辑复用和代码组织方式。它允许我们使用函数的方式来组织组件的逻辑，而不是依赖选项式 API 的选项。</p>
    
    <h3>主要优势</h3>
    <ul>
      <li><strong>更好的逻辑复用</strong>：可以将相关的逻辑提取到独立的函数中</li>
      <li><strong>更好的类型推导</strong>：TypeScript 支持更好</li>
      <li><strong>更小的打包体积</strong>：tree-shaking 支持更好</li>
      <li><strong>更好的代码组织</strong>：相关的逻辑可以放在一起</li>
    </ul>
    
    <h3>基本用法</h3>
    <pre><code>
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    return {
      count,
      doubleCount
    }
  }
}
    </code></pre>
    
    <h3>响应式系统</h3>
    <p>Vue 3 的响应式系统完全重写，使用 Proxy 替代了 Object.defineProperty，提供了更好的性能和更完整的功能。</p>
    
    <h3>总结</h3>
    <p>Composition API 是 Vue 3 最重要的新特性之一，它为 Vue 应用提供了更灵活、更强大的逻辑组织方式。虽然学习曲线可能比 Options API 稍陡，但掌握后会发现它带来的便利是巨大的。</p>
  `,
  likeNum: 156,
  saveNum: 45,
  commentNum: 23,
  isLiked: false,
  isSaved: false
}

const fetchPostDetail = async () => {
  loading.value = true
  // 模拟API调用
  setTimeout(() => {
    post.value = mockPost
    loading.value = false
  }, 500)
}

const handleLike = async () => {
  if (!post.value) return
  
  try {
    // 模拟API调用
    if (post.value.isLiked) {
      // 取消点赞
      post.value.likeNum--
      post.value.isLiked = false
    } else {
      // 点赞
      post.value.likeNum++
      post.value.isLiked = true
    }
  } catch (error) {
    console.error('操作失败:', error)
  }
}

const handleSave = async () => {
  if (!post.value) return
  
  try {
    // 模拟API调用
    if (post.value.isSaved) {
      // 取消收藏
      post.value.saveNum--
      post.value.isSaved = false
    } else {
      // 收藏
      post.value.saveNum++
      post.value.isSaved = true
    }
  } catch (error) {
    console.error('操作失败:', error)
  }
}

const goToUserProfile = (userId: number) => {
  router.push(`/profile?userId=${userId}`)
}

onMounted(() => {
  fetchPostDetail()
})
</script>

<template>
  <div class="post-detail">
    <div v-if="loading" class="loading-container">
      <el-card>
        <el-skeleton :rows="10" animated />
      </el-card>
    </div>
    
    <div v-else-if="post" class="post-container">
      <!-- 帖子头部 -->
      <el-card class="post-header">
        <div class="post-title">
          <h1>{{ post.summary }}</h1>
        </div>
        <div class="post-meta">
          <div class="author-info">
            <el-avatar :size="40" class="author-avatar">
              {{ post.writer.name.charAt(0) }}
            </el-avatar>
            <div class="author-details">
              <span class="author-name" @click="goToUserProfile(post.writer.id)">
                {{ post.writer.name }}
              </span>
              <span class="post-time">{{ post.updateTime }}</span>
            </div>
          </div>
          <div class="post-actions">
            <el-button 
              :type="post.isLiked ? 'danger' : 'default'"
              @click="handleLike"
            >
              <el-icon><ThumbsUp /></el-icon>
              {{ post.isLiked ? '取消点赞' : '点赞' }} ({{ post.likeNum }})
            </el-button>
            <el-button 
              :type="post.isSaved ? 'warning' : 'default'"
              @click="handleSave"
            >
              <el-icon><Star /></el-icon>
              {{ post.isSaved ? '取消收藏' : '收藏' }} ({{ post.saveNum }})
            </el-button>
            <el-button @click="router.push('/posts')">
              <el-icon><Back /></el-icon>
              返回列表
            </el-button>
          </div>
        </div>
      </el-card>

      <!-- 帖子内容 -->
      <el-card class="post-content">
        <div class="content-stats">
          <span class="stat">
            <el-icon><View /></el-icon>
            阅读量: 1,234
          </span>
          <span class="stat">
            <el-icon><ChatDotRound /></el-icon>
            评论: {{ post.commentNum }}
          </span>
        </div>
        <div class="content-body" v-html="post.content"></div>
      </el-card>

      <!-- 评论区 -->
      <el-card class="comments-section">
        <template #header>
          <div class="comments-header">
            <span>评论区 ({{ post.commentNum }})</span>
            <el-button type="primary" size="small">
              <el-icon><Edit /></el-icon>
              发表评论
            </el-button>
          </div>
        </template>
        <div class="comments-placeholder">
          <el-empty description="暂无评论，快来发表第一条评论吧！" />
        </div>
      </el-card>
    </div>
    
    <div v-else class="error-container">
      <el-result
        icon="error"
        title="帖子不存在"
        sub-title="抱歉，您访问的帖子不存在或已被删除"
      >
        <template #extra>
          <el-button type="primary" @click="router.push('/posts')">
            返回帖子列表
          </el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<style scoped>
.post-detail {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.loading-container {
  margin-bottom: 20px;
}

.post-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-header {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.post-title h1 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 2em;
  font-weight: bold;
  line-height: 1.4;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.author-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: bold;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.author-name {
  font-weight: bold;
  color: #409eff;
  cursor: pointer;
  font-size: 1.1em;
}

.author-name:hover {
  text-decoration: underline;
}

.post-time {
  color: #999;
  font-size: 0.9em;
}

.post-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.post-content {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.content-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.stat {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 0.9em;
}

.content-body {
  line-height: 1.8;
  color: #333;
  font-size: 1.1em;
}

.content-body h2 {
  color: #333;
  margin: 30px 0 15px 0;
  font-size: 1.5em;
}

.content-body h3 {
  color: #444;
  margin: 25px 0 10px 0;
  font-size: 1.3em;
}

.content-body p {
  margin: 15px 0;
}

.content-body ul {
  margin: 15px 0;
  padding-left: 20px;
}

.content-body li {
  margin: 8px 0;
}

.content-body pre {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 15px 0;
}

.content-body code {
  background: #f5f5f5;
  padding: 2px 5px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}

.comments-section {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comments-placeholder {
  padding: 40px 0;
}

.error-container {
  margin-top: 50px;
}

@media (max-width: 768px) {
  .post-detail {
    padding: 0 10px;
  }
  
  .post-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .post-actions {
    width: 100%;
    justify-content: flex-start;
  }
  
  .post-title h1 {
    font-size: 1.5em;
  }
  
  .content-body {
    font-size: 1em;
  }
  
  .content-body h2 {
    font-size: 1.3em;
  }
  
  .content-body h3 {
    font-size: 1.1em;
  }
}

@media (max-width: 480px) {
  .post-detail {
    padding: 0 5px;
  }
  
  .post-title h1 {
    font-size: 1.3em;
  }
  
  .post-actions {
    flex-direction: column;
  }
  
  .content-stats {
    flex-direction: column;
    gap: 10px;
  }
}
</style> 